<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-06 13:28:10
 * @LastEditTime: 2020-03-06 11:11:30
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style type="text/css">
			.head {
				background-color: #efefef !important;
			}

			.vin-tab {
				overflow: hidden;
			}

			.vin-tab>div {
				padding: 8px 0;
				text-align: center;
				width: 20%;
				float: left;
				color: #979797;
			}

			.tab-on {
				color: #2687f9 !important;
				background: #e5e5e5;
			}

			.vin-input {
				padding: 4px 15px
			}

			.vin-input-full {
				position: relative;
				width: 100%;
			}

			.data-search {
				border: 1px solid #e5e5e5;
				width: 100%;
				padding: 0 40px 0 10px;
				margin: 0;
				height: 34px;
				font-size: 13px;
				outline: none;
			}

			.vin-search {
				padding: 0 80px 0 10px;
			}

			.search-auto {
				width: 100%;
				overflow-x: auto;
				white-space: nowrap;
			}

			.search-button {
				position: absolute;
				right: 0;
				top: 0;
				width: 40px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				background: #e5e5e5;
				color: #2687f9;
			}

			.search-scan {
				position: absolute;
				right: 40px;
				top: 0;
				width: 40px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				color: #2687f9;
			}

			.vin-title {
				background: #e1e1e1;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
			}

			.vin-title a {
				display: block;
				padding: 4px 10px;
				text-decoration: none;
				color: #000;
				font-size: 14px;
			}

			.car-row {
				padding: 6px 10px;
				border-bottom: 1px solid #e5e5e5;
				overflow: hidden;
				position: relative;
				font-size: 13px;
			}

			.car-row img {
				width: 34px;
				height: 34px;
				margin-right: 10px;
			}

			.right-letter {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 12px;
				text-align: center;
				bottom: 0;
				overflow-y: scroll;
			}

			.right-letter>div {
				width: 20px;
			}

			.right-letter>div>a {
				width: 20px;
				text-decoration: none;
				color: #2687f9;
			}

			.row-h {
				line-height: 28px;
				font-size: 13px;
			}

			.search-tab {
				height: 100%;
				display: inline-block;
				padding: 4px;
			}

			.search-tab>span {
				display: inline-block;
				height: 100%;
				line-height: 24px;
				padding: 0 8px;
				background: #d9eaff;
				color: #2687f9;
				border-radius: 4px;
				font-size: 13px;
			}

			.row-full {
				position: relative;
			}

			.img-array {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 14px;
				width: 30px;
				text-align: center;
				color: #9a9a9a;
				font-size: 18px;
				line-height: 41px;
			}

			.vin-final {
				padding: 0 15px;
				height: 30px;
				line-height: 28px;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
			}

			.final-menu {
				margin-right: 15px;
				font-size: 13px;
			}

			.span-selected {
				color: #2687f9;
			}

			.item-repeat {
				overflow: hidden;
				padding: 15px;
				position: relative;
			}

			.item-img {
				float: left;
				width: 80px;
				margin-right: 10px;
			}

			.item-img img {
				width: 100%;
			}

			.item-txt {
				/* position: absolute;
            left: 100px;
            top: 15px;
            bottom: 15px;
            right: 0; */

				float: right;
				width: calc(100% - 100px);

			}

			.item-p1 span {
				font-size: 16px;
				color: #2687f9;
			}

			.item-p2 {
				font-size: 12px;
				color: #979797;
				margin: 0;
			}

			.no-img {
				margin-top: 40px;
				text-align: center;
				color: #bfbfbf;
			}

			.no-img img {
				width: 150px;
			}

			.no-img div {
				line-height: 40px;
				font-size: 16px;
				letter-spacing: 2px;
			}

			.head-fixed {
				height: 80px;
			}

			.content-r {
				height: calc(100% - 80px);
				position: relative;
			}

			.c-scroll {
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				height: 100%;
			}

			.checkbox {
				position: absolute;
				right: 15px;
				top: 15px;
			}

			.checkbox .mk {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.vin-final-info {
				padding: 0 15px;
				height: 40px;
				line-height: 39px;
				border-top: 1px solid #e5e5e5;
				/*background: #fcecbc;*/
				overflow: hidden;
			}

			.vin-final-info span {
				margin-right: 8px;
			}

			.vin-final-info span img {
				height: 30px;
			}

			.circle-button {
				width: 140px;
				height: 140px;
				background: #cd1b21;
				margin: 30px auto;
				border-radius: 70px;
				overflow: hidden;
				color: #fff;
				font-size: 16px;
			}

			.circle-button img {
				width: 60px;
				margin-bottom: 10px;
				margin-top: 30px;
			}

			.van-button--info {
				background-color: rgba(0, 0, 0, 0.7);
				border: 1px solid rgba(0, 0, 0, 0.7);
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="商品查询">
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content">
						<div class="head-fixed">
							<div class="vin-tab">
								<div @click="changeTab(2)" :class="tabStatus==2?'tab-on':''">按车型</div>
								<div @click="changeTab(1)" :class="tabStatus==1?'tab-on':''">VIN码</div>

								<div @click="changeTab(3)" :class="tabStatus==3?'tab-on':''">OE号</div>
								<div @click="changeTab(4)" :class="tabStatus==4?'tab-on':''">编号</div>
								<div @click="changeTab(5)" :class="tabStatus==5?'tab-on':''">FMSI</div>
							</div>
							<div class="vin-input">
								<div class="vin-input-full" v-show="tabStatus == 2">
									<input type="text" class="data-search" v-on:input="inputFunc"
										placeholder="请输入车型品牌或车系名称" v-model="searchData" v-show="level == 1" />
									<div class="data-search" v-show="level != 1">
										<div class="search-auto">
											<div v-for="(row,index) in searchArray" class="search-tab"
												@click="returnSearch(index)">
												<span>{{row.text}}</span>
											</div>
										</div>
									</div>
									<div style="height: 26px;line-height: 26px;"></div>
									<span class="search-button">查</span>
								</div>

								<div class="vin-input-full" v-show="tabStatus != 2">
									<input type="text" class="data-search" :class="tabStatus==1?'vin-search':''"
										:placeholder="getPlaceholder()" v-model="searchData_" />

									<!-- <span class="search-scan" @click="openScan()" v-show="tabStatus == 1">
                                    <img src="../image/scan_black.png" style="width: 30px;" />
                                </span> -->
									<span class="search-button" @click="codeSearch()">查</span>

								</div>
							</div>
						</div>
						<div class="content-r">
							<div class="no-img" v-if="isShowNoData == 1">
								<img src="../image/no-data.png" />
								<div>暂无数据</div>
							</div>

							<!-- <div v-show="tabStatus == 1 && !finalArray_.cats">
                            <div style="text-align: center;padding: 40px 10px 20px 10px;">
                                <div class="circle-button" @click="openScan">
                                    <img src="../image/scan.png">
                                    <div>扫描识别</div>
                                </div>
                                <van-row type="flex" justify="space-around">

                                    <van-col span="10">
                                        <van-button round type="info" icon="../image/pz.png" @click="openFNPhotograph">
                                            拍照识别</van-button>
                                    </van-col>
                                    <van-col span="10">
                                        <van-button round type="info" icon="../image/xc.png"
                                            @click="openUIMediaScanner">图片识别</van-button>
                                    </van-col>
                                </van-row>
                            </div>



                        </div> -->


							<div class="c-scroll" v-show="tabStatus == 2">
								<!-- 第一级-->
								<div v-for="row in carLists"
									v-show="row.nodeArray.length > 0 && checkNode(row) && level == 1 && !ifFinal">
									<div class="vin-title"><a :name="row.letter">{{row.letter}}</a></div>
									<div>
										<div class="car-row" v-for="item in row.nodeArray" v-show="item.isShow"
											@click="showNode(item)">
											<img :src="'http:' + item.FLogo" />
											<span>{{item.FName}}</span>
										</div>
									</div>
								</div>
								<!-- 第二级-->
								<div v-for="row in detailArray" v-show="level == 2 && !ifFinal">
									<div class="vin-title"><a>{{row.title}}</a></div>
									<div class="row-full" v-for="item in row.nodeArray">
										<div class="car-row row-h" @click="showNext(item)">
											<span>{{item.FName}}</span>
										</div>
										<div class="img-array" @click="openImage(item)" v-show="item.FS_images"><i
												class="fa fa-photo"></i></div>
									</div>
								</div>
								<!-- 第三级以上-->
								<div class="row-full" v-for="row in nextArray" v-show="level > 2 && !ifFinal">
									<div class="car-row row-h" @click="showNext(row)">
										<span>{{row.FName}}</span>
									</div>
									<div class="img-array" @click="openImage(row)" v-show="row.FS_images"><i
											class="fa fa-photo"></i></div>
								</div>
								<!-- 最底级的产品列表-->
								<div v-show="ifFinal">
									<div class="vin-final">
										<span class="final-menu" v-for="(row,index) in finalArray.cats"
											:class="index == finalIndex?'span-selected':''"
											@click="finalIndex = index">{{row.value}}</span>
									</div>
									<div v-for="(part,index) in finalArray.results" v-show="index == finalIndex">
										<div v-for="row in part">
											<div class="vin-title"><a>{{row.name}}</a></div>
											<div>
												<div class="item-repeat" v-for="item in row.items"
													v-show="item.brand_name && item.item_no">
													<div class="item-img" @click="openDetailImg(item.images)">
														<img :src="returnImg(item.images)" />
													</div>
													<div class="item-txt" @click="toggleCheckBox(item)">
														<div class="item-p1">{{item.brand_name}}
															<span>{{item.item_no}}</span>
														</div>
														<p class="item-p2" v-if="item.auto_params">
															{{item.auto_params[0].param_texts[0].param_text}}
														</p>
														<p class="item-p2" v-for="v in item.properties">
															{{v.name}}:{{v.value}}
														</p>
													</div>
													<div class="checkbox" @click="toggleCheckBox(item)">
														<van-checkbox shape="square" v-model="item.checked">
														</van-checkbox>
														<div class="mk"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
							<div class="right-letter" v-show="level == 1 && tabStatus == 2">
								<div v-for="row in letterArray"><a :href="'#' + row">{{row}}</a></div>
							</div>

							<div style="overflow-y: auto;height: 100%;" v-show="tabStatus != 2">
								<div>
									<div class="vin-final-info" v-show="carInfo">
										<span><img :src="'http:' + carInfo.brand_logo" /></span>
										<span>{{carInfo.model_name}}</span>
										<span>{{carInfo.sub_name}}</span>
										<span>{{carInfo.year}}</span>
									</div>
									<div class="vin-final" v-show="finalArray_.cats">
										<span class="final-menu" v-for="(row,index) in finalArray_.cats"
											:class="index == finalIndex_?'span-selected':''"
											@click="finalIndex_ = index">{{row.value}}</span>
									</div>
									<div v-for="(part,index) in finalArray_.results" v-show="index == finalIndex_">
										<div v-for="row in part">
											<div class="vin-title"><a>{{row.name}}</a></div>
											<div>
												<div class="item-repeat" v-for="item in row.items"
													v-show="item.brand_name && item.item_no">
													<div class="item-img" @click="openDetailImg(item.images)">
														<img :src="returnImg(item.images)" />
													</div>
													<div class="item-txt" @click="toggleCheckBox(item)">
														<div class="item-p1">{{item.brand_name}}
															<span>{{item.item_no}}</span>
														</div>
														<p class="item-p2" v-if="item.auto_params">
															{{item.auto_params[0].param_texts[0].param_text}}
														</p>
														<p class="item-p2" v-for="v in item.properties">
															{{v.name}}:{{v.value}}
														</p>
													</div>
													<div class="checkbox" @click="toggleCheckBox(item)">
														<van-checkbox shape="square" v-model="item.checked">
														</van-checkbox>
														<div class="mk"></div>
													</div>
												</div>
											</div>
										</div>

									</div>
								</div>

							</div>
						</div>
					</div>
					<van-loading v-if="showLoading" />
				</div>

				<div class="bottom">
					<div style="width:200px">
						<van-goods-action>
							<van-goods-action-icon icon="chat-o" text="客服" style="visibility: hidden;">
							</van-goods-action-icon>
							<van-goods-action-icon icon="cart-o" text="购物车" style="visibility: hidden;">
							</van-goods-action-icon>
							<van-goods-action-icon icon="shop-o" text="店铺" style="visibility: hidden;">
							</van-goods-action-icon>
							<van-goods-action-button type="warning" text="加入购物车" @click="addCart">
							</van-goods-action-button>
							<van-goods-action-button type="danger" text="立即购买"
								@click="buyNow"></van-goods-action-button>
						</van-goods-action>
					</div>

				</div>

			</div>
		</div>
	</body>

	<script type="text/javascript">
		var vm, autoType, autoKey;
		var scanModule = null;

		function initKernal() {
			scanModule.initKernal({
				keyName: '2D5B23D50E370D4D9F0A',
				keyPath: 'widget://res/fld2019_11_11.lic'
			}, function(ret, err) {
				if (!ret.status) {
					// layer.open({
					//     content: 'err2:初始化失败,请退出重试!',
					//     skin: 'msg',
					//     time: 2
					// });
				}
			});
		}

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				tabStatus: 2,
				level: 1,
				ifFinal: false,
				carInfo: '',
				searchArray: [],
				carLists: [],
				detailArray: [],
				nextArray: [],
				finalArray: [],
				finalArray_: [],
				finalIndex: -1,
				finalIndex_: -1,
				isShowNoData: -1,
				letterArray: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
					'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				searchData: '',
				searchData_: ''

			},
			created: function() {
				this.getCar();
			},
			methods: {
				changeTab(index) {
					var that = this;
					FLD.mustLogin(function() {
						if (that.tabStatus != index) {
							that.tabStatus = index;
							that.searchData_ = '';
							that.finalArray_ = [];
							that.carInfo = '';
						}
						if (index == 2) {
							that.isShowNoData = 0;
						}
					})


				},
				getCar() {
					var that = this;
					that.showLoading = true;
					FLD.nativeRequest_vin('GetAllAutoBrand', {}, function(datas) {
						// console.log(JSON.stringify(datas))
						that.showLoading = false;
						if (datas.status == 200) {
							var totalArray = [];
							for (var i in that.letterArray) {
								var newArray = [];
								for (var j in datas.data) {
									if (that.letterArray[i] == datas.data[j].FAlphabet) {
										datas.data[j].isShow = true;
										newArray.push(datas.data[j]);
									}
								}
								totalArray.push({
									letter: that.letterArray[i],
									nodeArray: newArray
								})
							}
							that.carLists = totalArray;
						} else {
							layer.open({
								content: datas.msg,
								skin: 'msg',
								time: 2
							});
						}

					})
				},
				inputFunc() {
					for (var i in this.carLists) {
						for (var j in this.carLists[i].nodeArray) {
							if (this.carLists[i].nodeArray[j].FName.toLowerCase().indexOf(this.searchData
									.toLowerCase()) > -1) {
								this.carLists[i].nodeArray[j].isShow = true;
							} else {
								this.carLists[i].nodeArray[j].isShow = false;
							}
						}
					}
				},
				checkNode(row) {
					var checkArray = row.nodeArray.filter(function(r) {
						return r.isShow == true;
					})
					return checkArray.length;
				},
				showNode(item) {
					var that = this;
					that.searchArray = [{
						id: item.FCarBrandId,
						text: item.FName
					}];

					that.showLoading = true;
					FLD.nativeRequest_vin('GetAutoSelectbyBrand', {
						brandId: item.FCarBrandId,
						isRoot: 1
					}, function(datas) {
						if (datas.status == 200) {
							var res_array = datas.data;
							var newArray = [];
							var repeatNode = function(x) {
								if (x == res_array.length) {
									that.showLoading = false;
									$('.c-scroll').scrollTop(0);
									that.detailArray = newArray;
									that.level = 2;
									that.searchData = '';
									return false;
								} else {
									FLD.nativeRequest_vin('GetAutoSelectbyBrand', {
										brandId: res_array[x].FCarDetailId,
										isRoot: 0
									}, function(datas) {
										if (datas.status == 200) {
											newArray.push({
												title: res_array[x].FName,
												nodeArray: datas.data
											})
											x++;
											repeatNode(x);
										} else {
											layer.msg(datas.msg);
										}

									})
								}
							};
							repeatNode(0);
						} else {
							layer.open({
								content: datas.msg,
								skin: 'msg',
								time: 2
							});
						}

					})
				},
				showNext(item) {
					var that = this;
					that.searchArray.push({
						id: item.FCarDetailId,
						text: item.FName
					});

					if (item.IsLeaf) {
						if (item.FSignal == 3) {
							autoType = 2;
						} else if (item.FSignal == 4) {
							autoType = 1;
						} else if (item.FSignal == 5) {
							autoType = 0;
						}
						autoKey = item.FZpId;
						that.showLoading = true;
						FLD.nativeRequest_vin('SearchBusinessByCarBrand', {
							autoType: autoType,
							autoKey: autoKey,
							cats: '42,208,270,43,209,44,98,101,100,99'
						}, function(datas) {
							that.showLoading = false;
							$('.c-scroll').scrollTop(0);
							var results = [];
							for (var i in datas.cats) {
								var results_node = [];
								for (var j in datas.cats[i].items) {
									for (var z in datas.results) {
										if (datas.results[z].key == datas.cats[i].items[j].key) {
											results_node.push(datas.results[z])
										}
									}
								}
								results.push(results_node)
							}

							var dataArray = {
								cats: datas.cats,
								results: results
							}
							that.finalArray = dataArray;
							that.finalIndex = 0;
							that.ifFinal = true;

							// if (that.finalArray.cats[1]) {
							//     that.getMenu(1)
							// }
							// if (that.finalArray.cats[2]) {
							//     that.getMenu(2)
							// }

						})
					} else {
						that.showLoading = true;
						FLD.nativeRequest_vin('GetAutoSelectbyBrand', {
							brandId: item.FCarDetailId,
							isRoot: 0,
							cats: ''
						}, function(datas) {
							that.showLoading = false;
							$('.c-scroll').scrollTop(0);
							setTimeout(function() {
								if (datas.status == 200) {
									that.nextArray = datas.data;
									that.level++;
								} else {
									layer.open({
										content: datas.msg,
										skin: 'msg',
										time: 2
									});
								}
							}, 10)

						})
					}
				},
				openImage(item) {
					var imageLists = item.FS_images.split(',');
					for (var i in imageLists) {
						imageLists[i] = 'http:' + imageLists[i];
					}
					photoBrowser.open({
						images: imageLists,
						bgColor: '#000'
					}, function(ret) {
						if (ret) {
							if (ret.eventType == 'click') {
								photoBrowser.close();
							}
						}
					})
				},
				returnSearch(index) {
					var that = this;
					that.ifFinal = false;
					that.searchArray.splice(index, that.searchArray.length - index);
					that.level = that.searchArray.length + 1;
					if (that.searchArray.length > 1) {
						that.showLoading = true;
						FLD.nativeRequest_vin('GetAutoSelectbyBrand', {
							brandId: that.searchArray[that.searchArray.length - 1].id,
							isRoot: 0
						}, function(datas) {
							that.showLoading = false;
							if (datas.status == 200) {
								that.nextArray = datas.data;
							} else {
								layer.open({
									content: datas.msg,
									skin: 'msg',
									time: 2
								});
							}
						})
					}
				},
				getMenu(index) {
					var that = this;
					var catsArray = [];
					for (var i in that.finalArray.cats[index].items) {
						catsArray.push(that.finalArray.cats[index].items[i].key);
					}
					that.showLoading = true;
					FLD.nativeRequest_vin('SearchBusinessByCarBrand', {
						autoType: autoType,
						autoKey: autoKey,
						cats: catsArray.join()
					}, function(datas) {
						that.showLoading = false;
						that.$set(that.finalArray.results, index, datas.results)
					})
				},
				returnImg(img) {
					if (!img || img.length == 0) {
						return '../image/no-image.png';
					} else {
						return 'http:' + img[0];
					}
				},
				openDetailImg(img) {
					if (!img || img.length == 0) {
						return false;
					} else {
						var imageLists = JSON.parse(JSON.stringify(img))
						for (var i in imageLists) {
							imageLists[i] = 'http:' + imageLists[i];
						}
						photoBrowser.open({
							images: imageLists,
							bgColor: '#000'
						}, function(ret) {
							if (ret) {
								if (ret.eventType == 'click') {
									photoBrowser.close();
								}
							}
						})
					}
				},
				getPlaceholder() {
					if (this.tabStatus == 1) {
						return '请输入17位VIN码进行查询';
					}
					if (this.tabStatus == 2) {
						return '请选择车型查询';
					}
					if (this.tabStatus == 3) {
						return '请输入OE号查询';
					}
					if (this.tabStatus == 4) {
						return '请输入厂商编号查询';
					}
					if (this.tabStatus == 5) {
						return '请输入D号查询';
					}
				},
				codeSearch() {
					var that = this;
					FLD.mustLogin(function() {
						if (!that.searchData_) {
							layer.open({
								content: '请输入要查找的内容!',
								skin: 'msg',
								time: 2
							});
							return false;
						}
						var postUrl = '';
						var parmName = {};
						that.finalArray_ = [];
						that.finalIndex_ = 0;
						that.carInfo = '';
						if (that.tabStatus == 1) {
							postUrl = 'SearchBusinessByVin';
							parmName = {
								vin: that.searchData_,
								cats: '42,208,270,43,209,44,98,101,100,99'
							};
						} else if (that.tabStatus == 3) {
							postUrl = 'SearchBusinessByOE';
							parmName = {
								OE: that.searchData_,
								cats: '42,208,270,43,209,44,98,101,100,99'
							};
						} else if (that.tabStatus == 4) {
							postUrl = 'SearchBusinessByPartsno';
							parmName = {
								partsno: that.searchData_,
								cats: '42,208,270,43,209,44,98,101,100,99'
							};
						} else if (that.tabStatus == 5) {
							postUrl = 'SearchBusinessByFmsi';
							parmName = {
								Fmsi: that.searchData_,
								cats: '42,208,270,43,209,44,98,101,100,99'
							};
						}
						that.showLoading = true;
						if (that.tabStatus == 1) {
							FLD.nativeRequest_vin(postUrl, parmName, function(datas) {
								that.showLoading = false;
								that.isShowNoData = 0;

								var results = [];
								for (var i in datas.cats) {
									var results_node = [];
									for (var j in datas.cats[i].items) {
										for (var z in datas.results) {
											if (datas.results[z].key == datas.cats[i].items[j].key) {
												results_node.push(datas.results[z])
											}
										}
									}
									results.push(results_node)
								}


								var dataArray = {
									cats: datas.cats,
									results: results
								}
								that.finalArray_ = dataArray;
								// if (that.finalArray_.cats && that.finalArray_.cats[1]) {
								//     that.getMenu_(1)
								// }
								// if (that.finalArray_.cats && that.finalArray_.cats[2]) {
								//     that.getMenu_(2)
								// }

								that.getCarInfo();

							})
						} else {
							FLD.nativeRequest_vin(postUrl, parmName, function(datas) {
								that.showLoading = false;
								if (!datas.cats) {
									that.isShowNoData = 1;
								} else {
									that.isShowNoData = 0;

									var results = [];
									for (var i in datas.cats) {
										var results_node = [];
										for (var j in datas.cats[i].items) {
											for (var z in datas.results) {
												if (datas.results[z].key == datas.cats[i].items[j]
													.key) {
													results_node.push(datas.results[z])
												}
											}
										}
										results.push(results_node)
									}

									var dataArray = {
										cats: datas.cats,
										results: results
									}
									that.finalArray_ = dataArray;

									// if (that.finalArray_.cats && that.finalArray_.cats[1]) {
									//     that.getMenu_(1)
									// }
									// if (that.finalArray_.cats && that.finalArray_.cats[2]) {
									//     that.getMenu_(2)
									// }
								}

							})
						}
					})

				},
				getCarInfo() {
					var that = this;
					FLD.nativeRequest_vin('GetCarInfoByVinCode', {
						vinCode: that.searchData_
					}, function(datas) {
						that.carInfo = datas;
					})
				},
				getMenu_(index) {
					var that = this;
					var catsArray = [];
					var postUrl = '';
					var parmName = {};

					for (var i in that.finalArray_.cats[index].items) {
						catsArray.push(that.finalArray_.cats[index].items[i].key);
					}
					if (that.tabStatus == 1) {
						postUrl = 'SearchBusinessByVin';
						parmName = {
							vin: that.searchData_,
							cats: catsArray.join()
						};
					} else if (that.tabStatus == 3) {
						postUrl = 'SearchBusinessByOE';
						parmName = {
							OE: that.searchData_,
							cats: catsArray.join()
						};
					} else if (that.tabStatus == 4) {
						postUrl = 'SearchBusinessByPartsno';
						parmName = {
							partsno: that.searchData_,
							cats: catsArray.join()
						};
					} else if (that.tabStatus == 5) {
						postUrl = 'SearchBusinessByFmsi';
						parmName = {
							Fmsi: that.searchData_,
							cats: catsArray.join()
						};
					}
					that.showLoading = true;

					if (that.tabStatus == 1) {
						FLD.nativeRequest_vin(postUrl, parmName, function(datas) {
							that.isShowNoData = 0;
							that.showLoading = false;
							that.$set(that.finalArray_.results, index, datas.results)
						})
					} else {
						FLD.nativeRequest_vin(postUrl, parmName, function(datas) {
							that.showLoading = false;
							if (!datas.cats) {
								that.isShowNoData = 1;
							} else {
								that.isShowNoData = 0;
								that.$set(that.finalArray_.results, index, datas.results)
							}

						})
					}
				},
				toggleCheckBox(item) {
					var that = this;
					if (typeof item.checked === 'undefined') {
						if (isNaN(parseInt(item.outerPartsNo))) {
							layer.open({
								content: '当前商品暂不出售',
								skin: 'msg',
								time: 2
							});
							return;
						}
						FLD.ajax('sp_getProductDetail', {
							productId: item.outerPartsNo
						}, function(res) {
							if (res.ds.length) {
								if (res.ds[0].Stock > 0) {
									that.$set(item, 'checked', true);
								} else {
									layer.open({
										content: '当前商品暂无库存',
										skin: 'msg',
										time: 2
									});
								}

							} else {
								layer.open({
									content: '当前商品暂不出售',
									skin: 'msg',
									time: 2
								});
							}
						})




					} else {
						item.checked = !item.checked
					}
				},
				openScan() {
					var that = this;

					FLD.mustLogin(function() {
						that.searchData_ = '';
						that.finalArray_ = [];
						scanModule.openEtScanActivity(function(ret, err) {
							if (ret.status) {
								if (ret.evenType == 'onSuccess') {
									that.searchData_ = ret.recogResult;
									that.codeSearch();
								}
							} else {
								layer.open({
									content: '识别失败,请重新识别!',
									skin: 'msg',
									time: 2
								});
							}
						});
					})

				},
				openFNPhotograph() {
					var that = this;
					var FNPhotograph = api.require('FNPhotograph');
					FNPhotograph.open({
						path: 'fs://',
						album: true,
						quality: 'medium'
					}, function(ret) {
						if (ret.eventType == 'takePhoto') {
							FNPhotograph.close();
							var path = ret.imagePath;
							that.disVinCode(path);
						}
					});
				},
				openUIMediaScanner() {
					var that = this;
					var UIMediaScanner = api.require('UIMediaScanner');
					UIMediaScanner.open({
						type: 'picture',
						column: 4,
						classify: true,
						max: 1,
						sort: {
							key: 'time',
							order: 'desc'
						},
						texts: {
							stateText: '已选择*项',
							cancelText: '取消',
							finishText: '完成'
						},
						styles: {
							bg: '#fff',
							mark: {
								icon: '',
								position: 'bottom_left',
								size: 20
							},
							nav: {
								bg: '#eee',
								stateColor: '#000',
								stateSize: 18,
								cancelBg: 'rgba(0,0,0,0)',
								cancelColor: '#000',
								cancelSize: 18,
								finishBg: 'rgba(0,0,0,0)',
								finishColor: '#000',
								finishSize: 18
							}
						},
						scrollToBottom: {
							intervalTime: 3,
							anim: true
						},
						exchange: true,
						rotation: true
					}, function(ret) {
						if (ret.eventType == 'confirm') {
							var path = ret.list[0].path;
							UIMediaScanner.transPath({
								path: path
							}, function(ret, err) {
								if (ret) {
									that.disVinCode(ret.path);
								}
							});


						}
					});
				},
				disVinCode(imagePath) {
					var that = this;
					that.searchData_ = '';
					that.finalArray_ = [];
					that.showLoading = true;
					scanModule.disVinCode({
						imagePath: imagePath
					}, function(ret, err) {
						that.showLoading = false;
						if (ret.status) {
							that.searchData_ = ret.data;
							that.codeSearch();

						} else {
							layer.open({
								content: '识别失败,请重新识别!',
								skin: 'msg',
								time: 2
							});
						}
					});
				},
				onClickRight() {
					var nameArray = [];
					var x = 0;
					if (this.tabStatus == 2) {
						for (var i in this.finalArray.results) {
							for (var j in this.finalArray.results[i]) {
								for (var z in this.finalArray.results[i][j].items) {
									if (this.finalArray.results[i][j].items[z].checked) {
										x = 1;
										nameArray.push(this.finalArray.results[i][j].items[z].item_no);
									}
								}
							}
						}
					} else {
						for (var i in this.finalArray_.results) {
							for (var j in this.finalArray_.results[i]) {
								for (var z in this.finalArray_.results[i][j].items) {
									if (this.finalArray_.results[i][j].items[z].checked) {
										x = 1;
										nameArray.push(this.finalArray_.results[i][j].items[z].item_no);
									}
								}
							}
						}
					}
					if (x == 0) {
						layer.open({
							content: '请至少选择一种商品!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					api.openWin({
						name: 'submitOrder',
						url: 'submitOrder.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							detailString: nameArray.join()
						}
					})

				},
				addCart() {
					var that = this;
					var ids = [];
					var x = 0;
					if (that.tabStatus == 2) {
						for (var i in that.finalArray.results) {
							for (var j in that.finalArray.results[i]) {
								for (var z in that.finalArray.results[i][j].items) {
									if (that.finalArray.results[i][j].items[z].checked) {
										x = 1;
										if (that.finalArray.results[i][j].items[z].outerPartsNo) {
											ids.push(that.finalArray.results[i][j].items[z].outerPartsNo);
										}

									}
								}
							}
						}
					} else {
						for (var i in that.finalArray_.results) {
							for (var j in that.finalArray_.results[i]) {
								for (var z in that.finalArray_.results[i][j].items) {
									if (that.finalArray_.results[i][j].items[z].checked) {
										x = 1;
										if (that.finalArray_.results[i][j].items[z].outerPartsNo) {
											ids.push(that.finalArray_.results[i][j].items[z].outerPartsNo);
										}
									}
								}
							}
						}
					}
					if (x == 0) {
						layer.open({
							content: '请至少选择一种商品!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					that.$dialog.confirm({
						title: '提示',
						message: '是否将当前勾选商品加入到购物车'
					}).then(() => {
						that.ifConfirm = true;
						var repeatAdd = function(x) {
							if (x == ids.length) {
								that.ifConfirm = false;
								layer.open({
									content: '购物车添加成功!',
									skin: 'msg',
									time: 2
								});
							} else {
								FLD.ajax('sp_getProductDetail', {
									productId: ids[x]
								}, function(res) {
									if (res.ds.length) {
										var skuId = res.ds[0].SkuId;
										var obj = {
											productId: ids[x],
											skuId: skuId,
											quantity: 1
										}
										FLD.ajax('sp_addShoppingCarts', obj, function(res) {
											x++;
											repeatAdd(x)
										})
									} else {
										x++;
										repeatAdd(x)
									}


								})

							}
						}
						repeatAdd(0)




						// FLD.ajax('sp_getProductDetail', { productCode: nameArray.join() }, function (res) {
						//     that.ifConfirm = false;
						//     var productArray = res.ds;
						//     var repeatAdd = function (x) {
						//         if (x == productArray.length) {
						//             layer.open({
						//                 content: '购物车添加成功!',
						//                 skin: 'msg',
						//                 time: 2
						//             });
						//         } else {
						//             var obj = {
						//                 productId: productArray[x].ProductId,
						//                 skuId: productArray[x].SkuId,
						//                 quantity: 1
						//             }
						//             FLD.ajax('sp_addShoppingCarts', obj, function (res) {
						//                 x++;
						//                 repeatAdd(x)
						//             })
						//         }
						//     }
						//     repeatAdd(0)


						// })


					}).catch(() => {

					});
				},
				buyNow() {
					var that = this;
					var ids = [];
					var x = 0;
					if (that.tabStatus == 2) {
						for (var i in that.finalArray.results) {
							for (var j in that.finalArray.results[i]) {
								for (var z in that.finalArray.results[i][j].items) {
									if (that.finalArray.results[i][j].items[z].checked) {
										x = 1;
										if (that.finalArray.results[i][j].items[z].outerPartsNo) {
											ids.push(that.finalArray.results[i][j].items[z].outerPartsNo);
										}
									}
								}
							}
						}
					} else {
						for (var i in that.finalArray_.results) {
							for (var j in that.finalArray_.results[i]) {
								for (var z in that.finalArray_.results[i][j].items) {
									if (that.finalArray_.results[i][j].items[z].checked) {
										x = 1;
										if (that.finalArray_.results[i][j].items[z].outerPartsNo) {
											ids.push(that.finalArray_.results[i][j].items[z].outerPartsNo);
										}
									}
								}
							}
						}
					}
					if (x == 0) {
						layer.open({
							content: '请至少选择一种商品!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					that.$dialog.confirm({
						title: '提示',
						message: '是否下单当前勾选商品'
					}).then(() => {
						that.ifConfirm = true;

						var commodityList = [];

						var repeatAdd = function(x) {
							if (x == ids.length) {
								that.ifConfirm = false;
								api.openWin({
									name: 'submitOrder',
									url: 'submitOrder.html',
									reload: true,
									slidBackEnabled: false,
									pageParam: {
										commodityList: commodityList,
										formType: 'VIN'
									}
								})
							} else {
								FLD.ajax('sp_getProductDetail', {
									productId: ids[x]
								}, function(res) {
									if (res.ds.length) {

										commodityList.push({
											productId: ids[x],
											quantity: 1,
											price: parseFloat(res.ds[0].SalePrice)
												.toFixed(2),
											skuId: res.ds[0].SkuId,
											image: res.ds[0].ThumbnailUrl160,
											name: res.ds[0].ProductName
										})
										x++;
										repeatAdd(x)
									} else {
										x++;
										repeatAdd(x)
									}


								})

							}
						}
						repeatAdd(0)



						// FLD.ajax('sp_getProductByCode', { productCode: nameArray.join() }, function (res) {
						//     that.ifConfirm = false;
						//     var commodityList = [];
						//     var productArray = res.ds;
						//     for (var x in productArray) {
						//         commodityList.push({
						//             productId: productArray[x].ProductId,
						//             quantity: 1,
						//             price: parseFloat(productArray[x].SalePrice).toFixed(2),
						//             skuId: productArray[x].SkuId,
						//             image: productArray[x].ThumbnailUrl160,
						//             name: productArray[x].ProductName
						//         })
						//     }
						//     api.openWin({
						//         name: 'submitOrder',
						//         url: 'submitOrder.html',
						//         reload: true,
						//         slidBackEnabled: false,
						//         pageParam: {
						//             commodityList: commodityList,
						//             formType: 'VIN'
						//         }
						//     })

						// })


					}).catch(() => {

					});
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	</script>

</html>